<!--
 * @Description: 资讯详情
 * @Author: zhaoxiaoyang
 * @LastEditors: seadon
 * @Date: 2021-07-19 21:33:05
 * @LastEditTime: 2022-09-22 15:54:16
-->
<template>
	<div class="details">
		<div
			v-for="(item, index) in dataList"
			:key="index"
			class="details-item"
			@click="toDetails(item)"
		>
			<div class="details-item-text">
				<EllipsisTooltip
					class="details-tooltip"
					:title="item.title"
					:style="{
						maxWidth:
							detailsClientWidth <= 1365 && autoDate
								? '100%'
								: 'calc(100% - 35px)',
					}"
					:mouseEnterDelay="1"
				/>

				<img
					v-if="item.top"
					:src="path.getFullPath('/icon/top_' + topUrl + '.svg')"
					class="text-icon"
				/>
			</div>
			<div
				v-if="(detailsClientWidth && detailsClientWidth > 1365) || !autoDate"
				class="details-item-date"
			>
				<span v-if="detailsClientWidth >= 1920 && autoDate">{{
					moment(item.pubdate).format('YYYY-MM-DD')
				}}</span>
				<span v-else>{{ moment(item.pubdate).format('YY-MM-DD') }}</span>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import EllipsisTooltip from '@/entry_desktop/components/EllipsisTooltip'

import { defineComponent, ref, computed, onMounted, onBeforeUnmount } from 'vue'
import moment from 'moment'
import { path } from '@/utils'

export default defineComponent({
	name: 'Details',
	components: {
		EllipsisTooltip,
	},
	props: {
		detailData: {
			type: Object,
			default: undefined,
		},
		autoDate: {
			type: Boolean,
			default: true,
		},
	},
	emits: ['handeleDetail'],
	setup(props, { emit }) {
		const topUrl = computed(
			() => localStorage.getItem('locale')?.slice(0, 2) || 'zh'
		)
		const dataList = computed(() => {
			return props.detailData
		})
		const toDetails = (params: any) => {
			emit('handeleDetail', params)
		}
		const detailsClientWidth = ref()
		const autoResize = () => {
			detailsClientWidth.value =
				window.innerWidth ||
				document.documentElement.clientWidth ||
				document.body.clientWidth
		}
		onMounted(() => {
			autoResize()
			window.addEventListener('resize', autoResize)
		})
		onBeforeUnmount(() => {
			window.removeEventListener('resize', autoResize)
		})
		return {
			moment,
			dataList,
			detailsClientWidth,
			toDetails,
			topUrl,
			path,
		}
	},
})
</script>
